<template>
  <div>
    <m-card :title="title" :icon="icon">
      <div class="nav jc-between">
        <div
          class="nav-item"
          :class="{ active: active === i }"
          v-for="(category, i) in categories"
          :key="i"
          @click="$refs.list.swiper.slideTo(i)"
        >
          <div class="nav-link">{{ category.name }}</div>
        </div>
      </div>

      <!-- body-内容 -->
      <div class="pt-3">
        <!-- :options="{autoHeight: true}" 控制自动高度 -->
        <swiper :options="{autoHeight: true}" ref="list" @slide-change="() => active = $refs.list.swiper.realIndex">
          <swiper-slide v-for="(category, i) in categories" :key="i">
            <!-- <div v-for="(category, i) in category" :key="i"> -->
              <slot name="items" :category="category"></slot>
            <!-- </div> -->
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    categories: { type: Array, required: true },
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="scss">
</style>